// 完成登录功能
// 1. 添加事件 #btn-login
// 2. 收集表单事件并验证
// 3. 发送请求
// 4. 判断请求,提示用户
// 5. 如果成功则本地存储用户名
// 6. 跳转页面

// 页面加载的时候 回显用户名密码
document.querySelector('[name="username"]').value = localStorage.getItem('username')
document.querySelector('[name="password"]').value = localStorage.getItem('password')

// 点击眼睛图标显示密码
document.querySelector('[data-toggle="password-text"]').addEventListener('click', e => {
    // 获取密码输入框
    const password = document.querySelector('[name="password"]')
    const icon = e.currentTarget.querySelector('i')
    if (password.type === 'password') {
        password.type = 'text'
        icon.classList.remove('bi-eye-fill')
        icon.classList.add('bi-eye-slash-fill')
    } else if (password.type === 'text') {
        password.type = 'password'
        icon.classList.remove('bi-eye-slash-fill')
        icon.classList.add('bi-eye-fill')
    }
})

// 注册登录事件
document.querySelector('#btn-login').addEventListener('click', async e => {
    // 收集数据并验证
    const data = serialize(document.querySelector('.login-form'), { hash: true, empty: true })
    if (!data.username || !data.password) {
        showToast('用户名或密码不能为空')
        return
    }
    if (data.username.length < 8 || data.username.length > 30) {
        showToast('用户名长度必须在8-30之间')
        return
    }
    if (data.password.length < 6 || data.password.length > 30) {
        showToast('密码长度必须在6-30之间')
        return
    }
    // 发送请求,判断响应结果
    try {
        const res = await axios.post('/login', data)
        console.log(res)

        // 弹框登录成功
        showToast(res.message)
        // 存储用户名
        const obj = {}
        obj.username = res.data.username
        obj.token = res.data.token

        localStorage.setItem('user', JSON.stringify(obj))

        // 页面跳转
        setTimeout(() => {
            window.location.href = './index.html'
        }, 1000)
    } catch (err) {
        // 弹框登录失败
        console.dir(err)
        showToast(err.response.data.message)
    }
})